{#- vim: set et ts=8 sts=4 sw=4 ai: -#}
<!DOCTYPE html>
<html lang="{{config.SITE_LANG}}" class="auto-scaling-disabled">
<head>
  <!-- Meta tags -->
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
  <meta name="viewport" content="width=device-width" />
{# meta preview block [[ #}
{%if title%}
  <meta property="og:site_name" content="{%if config.SITE_NAME %}{{config.SITE_NAME}}{%else%}An Otter Wiki{%endif%}" />
{% endif %}
  <meta property="og:title" content="{%if title%}{{title}}{%elif config.SITE_NAME %}{{config.SITE_NAME}}{%else%}An Otter Wiki{%endif%}" />
  <meta property="og:type" content="website" />
{%- if pagepath %}
  <meta property="og:url" content="{{ url_for('view', path=pagepath, _external=True) }}" />
{%- else %}
  <meta property="og:url" content="{{ url_for("index", _external=True) }}" />
{%- endif %}
  <meta property="og:description" content="{%if description%}{{description}}{%elif config.SITE_DESCRIPTION %}{{config.SITE_DESCRIPTION}}{%else%}A minimalistic wiki powered by python, markdown and git.{%endif%}" />
{%- if pagelogo %}
  <meta property="og:image" content="{{ pagelogo }}" />
{%- if pagelogo_properties and pagelogo_properties.height %}
<meta property="og:image:width" content="{{pagelogo_properties.height}}" />
{%- endif %}
{%- if pagelogo_properties and pagelogo_properties.width %}
<meta property="og:image:width" content="{{pagelogo_properties.width}}" />
{%- endif %}
{%- elif config.SITE_LOGO %}
  <meta property="og:image" content="{{ config.SITE_LOGO }}" />
{%- else %}
  <meta property="og:image" content="{{ url_for("static", filename="img/otterhead.png", _external=True) }}" />
  <meta property="og:image:width" content="200" />
  <meta property="og:image:height" content="144" />
  <meta property="og:image:alt" content="An Otter Wiki Logo" />
{%- endif %}
{# meta preview block ]] #}
  <!-- Favicon and title -->
{%- if config.SITE_ICON %}
    <link rel="icon" href="{{ config.SITE_ICON }}">
{%- else %}
    <link rel="icon" href="{{ url_for("static", filename="img/otter-favicon2.png") }}">
{%- endif %}
{% block title %}
    <title>{%if title%}{{title}} &ndash; {%endif%}{%if config.SITE_NAME %}{{config.SITE_NAME}}{%else%}An Otter Wiki{%endif%}</title>
{% endblock %}
    <link href="{{ url_for("static", filename="css/halfmoon.min.css") | debug_unixtime }}" rel="stylesheet" media="screen" />
    <!-- Otterwiki CSS -->
    <link href="{{ url_for("static", filename="css/otterwiki.css") | debug_unixtime }}" rel="stylesheet" media="screen" />
    <!-- Otterwiki Print -->
    <link href="{{ url_for("static", filename="css/print.css") | debug_unixtime }}" rel="stylesheet" media="print" />
    <!-- Font awesome -->
    <link rel="stylesheet" href="{{ url_for("static", filename="css/fontawesome-all.min.css") | debug_unixtime }}">
    <!-- pygments  -->
    <link href="{{ url_for("static", filename="css/pygments.css") | debug_unixtime }}" rel="stylesheet" media="screen"/>
    <link href="{{ url_for("static", filename="css/pygments-print.css") | debug_unixtime }}" rel="stylesheet" media="print"/>
    <!-- Roboto font (Used when Apple system fonts are not available) -->
    <link href="{{ url_for("static", filename="css/roboto.css") | debug_unixtime }}" rel="stylesheet"/>
    <!-- custom.css for tweaking the default themes -->
    <link href="{{ url_for("static", filename="custom/custom.css") }}" rel="stylesheet" media="screen" />
    <!-- Documentation styles -->
    {{config.HTML_EXTRA_HEAD|safe}}
{%- block head %}
{% endblock -%}
{%- if request.cookies.get('halfmoon_preferredMode') == "dark-mode" %}
{#- Dark Mode Optimization -#}
    <!-- Chrome, Firefox OS and Opera mobile address bar theming -->
    <meta name="theme-color" content="#000000">
    <!-- Windows Phone mobile address bar theming -->
    <meta name="msapplication-navbutton-color" content="#000000">
    <!-- iOS Safari mobile address bar theming -->
    <meta name="apple-mobile-web-app-status-bar-style" content="#000000">
{% endif -%}
</head>
{% if request.cookies.get('halfmoon_preferredMode') %}
<body class="{% if request.cookies.get('halfmoon_preferredMode') == "dark-mode" %}dark-mode {%endif%}with-custom-webkit-scrollbars with-custom-css-scrollbars">
{% else %}
<body class="with-custom-webkit-scrollbars with-custom-css-scrollbars" data-set-preferred-mode-onload="true">
{% endif %}

{%- block bodytop %}
{% endblock -%}
    <!-- Page wrapper start -->
    <div id="page-wrapper" class="page-wrapper {% block page_wrapper_config -%}with-navbar with-sidebar{%-endblock%}" {%if request.cookies.get('halfmoon_sidebar') == "hidden" %}data-sidebar-hidden="hidden" {%elif request.cookies.get('halfmoon_sidebar') == "visible" %}data-show-sidebar-onload-sm-and-down="visible" {%endif%}data-sidebar-type="overlayed-sm-and-down">

        <!-- Sticky alerts -->
        <div class="sticky-alerts"></div>

{% block navbarmain %}
        <!-- Navbar start -->
        <nav class="navbar">
            <div class="navbar-content relative">
                <button id="toggle-sidebar-btn" class="btn btn-action" type="button" onclick="halfmoon.toggleSidebar()" title="Toggle Sidebar ([)">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
            <a href="{{ url_for("index") }}" class="navbar-brand ml-10 ml-sm-20" title="{%if description%}{{description}}{%elif config.SITE_DESCRIPTION %}{{config.SITE_DESCRIPTION}}{%else%}A minimalistic wiki powered by python, markdown and git.{%endif%}">
{%- if config.SITE_LOGO %}
                <img src="{{ config.SITE_LOGO }}" alt="" id="site_logo"/>
{%- else %}
                <img src="{{ url_for("static", filename="img/otterhead.png") }}" alt="" id="site_logo"/>
{%- endif %}
                <span class="d-none d-sm-flex text-truncate">{{ config.SITE_NAME }}</span>
            </a>
{% block navbar_editor %}
{% endblock %}
            <div class="navbar-content ml-auto">
{% block navbarsearch %}
                <form action="{{ url_for("search") }}" method="post" class="relative">
                <span class="top-search">
                <input id="search-query" name="query" type="text" class="form-control mr-5" placeholder="Search" style="padding-right: 3.5rem;">
                </span>
                </form>
{% endblock %}
{% block navbardropdown_outer %}
                <div class="dropdown">
                  <button class="btn btn-action" data-toggle="dropdown" type="button" id="navbar-dropdown-toggle-btn-1">
                    <i class="fas fa-ellipsis-v"></i>
                  </button>
                  <div class="dropdown-menu dropdown-menu-right w-200" aria-labelledby="navbar-dropdown-toggle-btn-1"> <!-- w-200 = width: 20rem (200px) -->

{% block navbardropdown %}
{% if config.HIDE_LOGO %}
                    <a href="{{ url_for("about") }}" class="dropdown-item-with-icon">
                        <span class="dropdown-icon">
                            <img width="26" src="{{ url_for("static", filename="img/otterhead.png") }}" >
                        </span>
                        About An Otter Wiki
                    </a>
{% endif %}
{% if has_permission('READ') %}
                    <div class="dropdown-divider mt-5 mb-5"></div>
{% endif %}
                    <a href="#" class="dropdown-item-with-icon" onclick="halfmoon.toggleDarkMode()">
                        <span class="dropdown-icon">
                            <i class="far fa-moon"></i>
                        </span>
                        Toggle dark mode
                    </a>

{% if not current_user.is_authenticated %}
                    <a href="{{ url_for("login") }} " class="dropdown-item-with-icon">
                        <span class="dropdown-icon">
                            <i class="fas fa-sign-in-alt"></i>
                        </span>
                        Login
                    </a>
{% else %}
                    <a href="{{ url_for("settings") }}" class="dropdown-item-with-icon">
                        <span class="dropdown-icon">
                            <i class="fas fa-cog"></i>
                        </span>
                        Settings
                    </a>
  {% if auth_supported_features['logout'] %}
                    <a href="{{ url_for("logout") }}"  class="dropdown-item-with-icon">
                        <span class="dropdown-icon">
                            <i class="fas fa-sign-out-alt"></i>
                        </span>
                        Logout
                    </a>
  {% endif %}
{% endif %}
{% endblock %}
                  </div> <!-- inner dropdown -->
                </div> <!-- dropdown -->
{% endblock %}
{% block navbar %}
{% endblock %}
            </div>
        </nav>
        <!-- Navbar end -->
{% endblock %}


{% block sidebaroverlay %}
        <!-- Sidebar overlay -->
        <div class="sidebar-overlay" onclick="halfmoon.toggleSidebar()"></div>

        <!-- Sidebar start -->
        <div class="sidebar d-flex flex-column relative">
            <div class="sidebar-menu w-full flex-grow-1">
                {% block menu %}
                {% endblock %}
            </div>

            {% if not config.HIDE_LOGO %}
            <div class="sidebar-otter" >
                <a href=" {{ url_for("about") }}" class="sidebar-link">
                <img class="sidebar-logo" src="{{ url_for("static", filename="img/otter.png") | debug_unixtime }}" alt=""/><br/>
                An Otter Wiki
                </a>
            </div>
            {% endif %}
        </div>
        <!-- Sidebar end -->
{% endblock %}

{% block content_wrapper_outer %}
        <!-- Content wrapper start -->
        <div class="content-wrapper" id="content-wrapper">

            <div class="container-fluid">
                <div class="row">
{% if ( self.extra_nav() | trim | length ) > 0 %}{# limit content when extra_nav is not empty #}
                <div class="col-xl-9">
{% else %}
                <div class="col">
{% endif %}
{% block content_wrapper %}
                <div class="content">
{% block breadcrumbs %}
{% endblock %}
{% block content %}
{{content|safe}}
{% endblock %}
                </div> <!-- content -->
{% endblock content_wrapper %}
            </div> <!-- col-xl-9 -->
{# extra_nav #}
{% if ( self.extra_nav() | trim | length ) > 0 %}{# display only if block not empty #}
            <div class="col-xl-3 d-none d-xl-block extra-nav-container">
                    <div class="extra-nav" id="extra-nav">
{% block extra_nav -%}
{%- endblock extra_nav %}
{# Nasty little hack to blow up the width of the extra-nav to a maximum
 - of you find a solution in css: please tell me #}
<div style="visibility:hidden;">0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9</div>
                    </div> <!-- extra-nav -->
            </div> <!-- extra-nav-container -->
{% endif %}{# extra nav #}
            </div> <!-- row -->
            </div> <!-- container -->
        </div>
        <!-- Content wrapper end -->
{% endblock content_wrapper_outer %}
    </div>
    <!-- Page wrapper end -->
  <!-- Halfmoon JS -->
  <script src="{{ url_for("static", filename="js/halfmoon.js") | debug_unixtime }}"></script>
{% block js %}
{% endblock %}
{#
    Flashes
#}
<script type="text/javascript">
{% with messages = get_flashed_messages(with_categories=true) %}
  {% for category, message in messages %}
    halfmoon.initStickyAlert({
      content: "{{ message | safe}}",
      alertType: "{{category}}",
      fillType: "filled",
      hasDismissButton: true,
{% if category in ["alert-danger"] %}
      timeShown: 60000,
{% elif category in ["alert-secondary"] %}
      timeShown: 120000,
{% endif %}
    });
  {% endfor %}
{% endwith %}
</script>
  <!-- custom js for tweaking an otter wiki -->
  <script src="{{ url_for("static", filename="custom/custom.js") }}"></script>
  <!-- custom HTML -->
  {{config.HTML_EXTRA_BODY|safe}}
</body>
</html>
